<template>
	<view class="">
		<!-- 已登录: 显示购物车 -->
		<view v-if="getSure">
			<!-- 购物车列表 -->
			<view class="cart-list" v-if="showCartList">
				<scroll-view scroll-y class="scroll-view">
					<!-- 优惠提示 -->
					<view class="tips">
						<text class="label">满减</text>
						<text class="desc">满1件, 即可享受9折优惠</text>
					</view>
					<!-- 滑动操作分区 -->
					<uni-swipe-action>
						<!-- 滑动操作项 -->
						<uni-swipe-action-item v-for="item in user_shopping_cart" :key="item.shopping_cart_id" class="cart-swipe">
							<!-- 商品信息 -->
							<view class="goods">
								<!-- 选中状态 -->
								<checkbox @click="onChangeSelected(item)" color="#007aff" borderColor="#d1d1d1" class="checkbox"
									:checked="item.selected"></checkbox>
								<navigator :url="`/pages/mall/mall-goods-detail/mall-goods-detail?id=${item.goodsId}`"
									hover-class="none" class="navigator">
									<image mode="aspectFill" class="picture" :src="item.goodsImage"></image>
									<view class="meta">
										<view class="name ellipsis">{{ item.goodsName }}</view>
										<view class="attrsText ellipsis">{{ item.goodsArticle }}</view>
										<view class="price">{{ item.goodsPrice }}</view>
									</view>
								</navigator>
								<!-- 商品数量调整 -->
								<view class="count">
									<u-number-box v-model="item.goodsCount" integer :min="1" :max="100"
										@change="addCount($event,item.shopping_cart_id)"></u-number-box>
								</view>
							</view>
							<!-- 右侧删除按钮 -->
							<template #right>
								<view class="cart-swipe-right">
									<button @tap="onDeleteCart(item.shopping_cart_id)" class="button delete-button">
										删除
									</button>
								</view>
							</template>
						</uni-swipe-action-item>
					</uni-swipe-action>
					<!-- 底部占位空盒子 -->
					<view class="toolbar-height"></view>
				</scroll-view>
			</view>
			<!-- 购物车空状态 -->
			<view class="cart-blank" v-else>
				<image src="/static/images/blank_cart.png" class="image" />
				<text class="text">购物车还是空的，快来挑选好货吧</text>
				<navigator open-type="switchTab" url="/pages/mall/mall" hover-class="none">
					<button class="button">去商城看看</button>
				</navigator>
			</view>
			<!-- 吸底工具栏 -->
			<view v-if="showCartList" class="toolbar">
				<checkbox @click="onChangeSelectedAll" class="all" :checked="isSelectedAll" color="#007aff"
					borderColor="#d1d1d1">
					全选
				</checkbox>
				<text class="text">合计:</text>
				<text class="amount">{{selectedCartListMoney}}</text>
				<view class="button-grounp">
					<view @tap="gotoPayment" class="button payment-button">
						去结算( {{selectedCartListCount}} )
					</view>
				</view>
			</view>
		</view>
		<!-- 未登录: 提示登录 -->
		<view class="login-blank" v-else>
			<text class="text">登录后可查看购物车中的商品</text>
			<navigator url="/pages/login/login" hover-class="none">
				<button class="button">去登录</button>
			</navigator>
		</view>
	</view>
</template>

<script>
	import submit_orderVue from "../submit_order/submit_order.vue";
	import store from "@/store/index.js";
	import {
		mapState,
		mapMutations,
		mapActions,
		mapGetters
	} from "vuex";
	export default {
		onLoad(option) {

		},
		data() {
			return {
				// 购物车数据
				// "shopping_cart_id": ,
				// "userId": ,
				// "goodsId": ,
				// "goodsName": ,
				// "goodsImage": ,
				// "goodsArticle": ,
				// "goodsIntroduce": ,
				// "goodsPrice": ,
				// "goodsType": ,
				// "goodsCount": ,
				// "selected":
			};
		},
		methods: {
			...mapMutations('user', ['get_user_shopping_cart']),
			// 修改数量
			addCount(e, shopping_cart_id) {
				// console.log(e, shopping_cart_id)
				uni.request({
					url: 'http://localhost:3000/users/shopping_cart/addCount',
					method: 'post',
					data: [shopping_cart_id, e.value],
					success: (res) => {
						// console.log("yes:", )
					},
				});

			},
			// 修改选中状态-单品修改
			onChangeSelected(item) {
				// 前端数据更新-是否选中取反
				item.selected = !item.selected;
			},
			// 修改选中状态-全选修改
			onChangeSelectedAll() {
				// 全选状态取反
				this.isSelectedAll = !this.isSelectedAll;
			},
			// 点击删除按钮
			onDeleteCart(shopping_cart_id) {
				// 弹窗二次确认
				uni.showModal({
					content: '是否删除',
					confirmColor: '#27BA9B',
					success: (res) => {
						if (res.confirm) {
							// 后端删除单品
							uni.request({
								url: 'http://localhost:3000/users/shopping_cart/delete',
								method: 'post',
								data: {
									id: shopping_cart_id
								},
								success: (res) => {
									console.log(res)
									// 重新获取列表
									this.get_user_shopping_cart(this.user.userId) //获取购物车数据
								},
							});

						}
					},
				})
			},

			//结算
			gotoPayment() {
				if (this.selectedCartListCount === 0) {
					return uni.showToast({
						icon: "none",
						title: "请选择商品",
					});
				} else {
					// 跳转到结算页
					uni.navigateTo({
						url: `/pages/mall/submit_order/submit_order?order=${JSON.stringify(this.selectedCartList)}`
					});
				}
			},
		},
		created() {
			// console.log(this.getSure);
		},
		computed: {
			...mapGetters("user", ["getSure"]),
			...mapState('user', ['user_shopping_cart', 'user']),
			//判断有无购物车数据
			showCartList() {
				return this.user_shopping_cart.length > 0;
			},
			// 计算全选状态
			isSelectedAll: {
				get() {
					return this.user_shopping_cart.every((item) => item.selected);
				},
				set(stu) {
					this.user_shopping_cart.forEach((item) => (item.selected = stu));
				},
			},
			// 筛选出选中的单品列表
			selectedCartList() {
				return this.user_shopping_cart.filter((n) => n.selected);
			},

			// 计算选中总件数
			selectedCartListCount() {
				return this.selectedCartList.reduce((sum, item) => sum + item.goodsCount, 0);
			},

			// 计算选中总金额
			selectedCartListMoney() {
				return this.selectedCartList.reduce((sum, item) => sum + item.goodsPrice * item.goodsCount, 0);
			},
		},
		created() {
			if (!this.user_shopping_cart.length) {
				this.get_user_shopping_cart(this.user.userId) //获取购物车数据
			}
		}
	};
</script>

<style scoped lang="scss">
	@import "../styles/mall-shopcart.scss";
</style>